import variables from '@/styles/variables.scss';
import { ActionTree, MutationTree } from 'vuex';
import { IRootState } from '../index';

export interface ISettingsState {
  theme: string;
  originalStyle: string;
  tagsView: boolean;
  siderbarLogo: boolean;
}

// 定义state
const state: ISettingsState = {
  theme: variables.theme,
  originalStyle: '', // 保存element 主题样式文件内容 作为替换模板
  tagsView: true,
  siderbarLogo: true
};

// 动态key的情况下 根据不同的key 约束对应value
// http://www.voidcn.com/article/p-wtmkdcie-byz.html
type ValueOf<T> = T[keyof T];
interface ISettings {
  key: keyof ISettingsState;
  value: ValueOf<ISettingsState>;
}

// 定义mutations通用mutation
const mutations: MutationTree<ISettingsState> = {
  CHANGE_SETTING(state, { key, value }: ISettings) {
    if (key in state) {
      (state[key] as ValueOf<ISettingsState>) = value;
    }
  }
};

const actions: ActionTree<ISettingsState, IRootState> = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};
